// 发展历程动画效果
function initHistoryAnimation() {
    // 检查是否存在id="history"的元素
    const historyElement = document.getElementById('history');
    if (!historyElement) {
        console.log('History element not found, skipping animation initialization');
        return;
    }

    console.log('History animation initialized');
    
    const timelineItems = document.querySelectorAll('.timeline-item');
    const historyTitle = document.querySelector('.history-title');
    const historyDesc = document.querySelector('.history-desc');

    // 时间轴内容数据
    const timelineData = [
        {
            title: "初期探索与基础搭建期",
            desc: "通过核心业务切入市场，早期聚焦餐饮和零售行业，逐步建立服务标准与客户信任。此阶段积累首批合作品牌，奠定后续跨行业服务基础。采用轻资产运营策略，通过合作头部企业优化服务流程，形成可复制的服务模型。"
        },
        {
            title: "规模化扩张与行业渗透",
            desc: "依托已验证模式，将业务扩展至15个行业，覆盖餐饮、零售、消费品、科技、健康等多个领域，逐步形成多行业的企业服务体系，并且包含多个行业的头部企业和品牌。"
        },
        {
            title: "资本合作与商业生态构建",
            desc: "通过不断引入投资机构、企业管理服务、新媒体、科技服务公司资源，甄成集团的企业价值链赋能平台已经搭建形成。目前40余家资本方（创投机构、产投基金、银行、证券公司），50余家企业专业服务机构（培训公司、咨询公司、科技服务公司）、20多个政府平台等建立深度合作关系，推动服务规模扩大与体量增长，为企业提供全生态的服务。"
        }
    ];

    // 初始化动画状态
    function initAnimation() {
        // 隐藏所有时间线项目
        timelineItems.forEach(item => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
        });

        // 隐藏标题和描述
        if (historyTitle) {
            historyTitle.style.opacity = '0';
            historyTitle.style.transform = 'translateY(20px)';
        }
        if (historyDesc) {
            historyDesc.style.opacity = '0';
            historyDesc.style.transform = 'translateY(20px)';
        }
    }

    // 执行动画
    function playAnimation() {
        // 显示标题和描述
        if (historyTitle) {
            historyTitle.style.transition = 'all 0.8s ease-out';
            historyTitle.style.opacity = '1';
            historyTitle.style.transform = 'translateY(0)';
        }
        if (historyDesc) {
            setTimeout(() => {
                historyDesc.style.transition = 'all 0.8s ease-out';
                historyDesc.style.opacity = '1';
                historyDesc.style.transform = 'translateY(0)';
            }, 200);
        }

        // 依次显示时间线项目
        timelineItems.forEach((item, index) => {
            setTimeout(() => {
                item.style.transition = 'all 0.8s ease-out';
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 300 * (index + 1)); // 每个项目延迟300ms
        });
    }

    // 内容切换动画
    function animateContent(element, newContent, direction = 'right') {
        if (!element) return;
        
        // 设置初始状态
        element.style.transition = 'all 0.5s ease-out';
        element.style.opacity = '0';
        element.style.transform = `translateX(${direction === 'right' ? '20px' : '-20px'})`;
        
        // 更新内容
        element.textContent = newContent;
        
        // 触发重排以确保动画生效
        element.offsetHeight;
        
        // 设置最终状态
        element.style.opacity = '1';
        element.style.transform = 'translateX(0)';
    }

    // 切换时间轴项目状态
    function switchTimelineItem(index) {
        // 移除所有项目的active类
        timelineItems.forEach(item => {
            item.classList.remove('active');
            const img = item.querySelector('.timeline-point img');
            if (img) {
                img.style.transition = 'all 0.3s ease-out';
                img.style.transform = 'scale(0.8)';
                setTimeout(() => {
                    img.src = img.src.replace('ico_time_on.png', 'ico_time.png');
                    img.style.transform = 'scale(1)';
                }, 150);
            }
        });

        // 添加active类到选中的项目
        const selectedItem = timelineItems[index];
        if (selectedItem) {
            selectedItem.classList.add('active');
            const img = selectedItem.querySelector('.timeline-point img');
            if (img) {
                img.style.transition = 'all 0.3s ease-out';
                img.style.transform = 'scale(0.8)';
                setTimeout(() => {
                    img.src = img.src.replace('ico_time.png', 'ico_time_on.png');
                    img.style.transform = 'scale(1)';
                }, 150);
            }
        }

        // 更新标题和描述内容
        if (historyTitle && historyDesc && timelineData[index]) {
            // 根据点击的项目位置决定动画方向
            const direction = index > timelineItems.length / 2 ? 'right' : 'left';
            
            // 添加内容切换动画
            animateContent(historyTitle, timelineData[index].title, direction);
            setTimeout(() => {
                animateContent(historyDesc, timelineData[index].desc, direction);
            }, 200);
        }
    }

    // 为时间轴项目添加点击事件
    timelineItems.forEach((item, index) => {
        item.addEventListener('click', () => {
            switchTimelineItem(index);
        });
    });

    // 检查元素是否在视口中
    function isInViewport(element) {
        const rect = element.getBoundingClientRect();
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
        
        // 调整视口检测的阈值，使动画更早触发
        const threshold = windowHeight * 0.2; // 当元素进入视口20%时触发动画
        
        return (
            rect.top <= windowHeight - threshold &&
            rect.bottom >= threshold &&
            rect.left <= windowWidth &&
            rect.right >= 0
        );
    }

    // 监听滚动事件
    function handleScroll() {
        const historySection = document.querySelector('.history-section');
        if (historySection && isInViewport(historySection)) {
            playAnimation();
            // 移除滚动监听，避免重复触发
            window.removeEventListener('scroll', handleScroll);
        }
    }

    // 处理窗口大小变化
    function handleResize() {
        // 重置动画状态
        initAnimation();
        // 检查是否需要立即播放动画
        handleScroll();
    }

    // 初始化
    initAnimation();
    // 添加滚动监听
    window.addEventListener('scroll', handleScroll);
    // 添加窗口大小变化监听
    window.addEventListener('resize', handleResize);
    // 立即检查一次，以防元素已经在视口中
    handleScroll();
}

// 确保在组件加载完成后执行
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initHistoryAnimation);
} else {
    initHistoryAnimation();
} 